/*
 * @Author: yangrongxin
 * @Date: 2021-06-29 10:50:27
 * @LastEditors: yangrongxin
 * @LastEditTime: 2021-09-14 15:23:34
 */
import React from 'react';
import { View } from '@tarojs/components';
import { useSafeArea } from '@/hooks/';
import { AtFloatLayout } from 'taro-ui';
import styles from './index.module.less';

interface IPickerWapperProps {
  content?: any;
  children?: any;
  isOpened: boolean;
  onClose: any; // 关闭弹窗的方法
  extendsContainerWapper?: string; // 扩展外层wapper样式的方法
  hidePaddingBottom?: boolean; // 是不是隐藏底部扩展的样式
  [props: string]: any; // 其余扩展字段
  // onChange?: any; // 修改当前参数的方法
  // queryType?: number; // 当前请求提交的状态
  // patientId?: string; // 患者id
}

const PickerWapper = (props: IPickerWapperProps) => {
  const {
    isOpened,
    onClose,
    content,
    children,
    hideWapperBgc = false,
    extendsContainerWapper,
    hidePaddingBottom = false,
    ...otherProps
  } = props;

  const [, safeBottom] = useSafeArea();

  const Components: any = content || null;

  return (
    <View catchMove>
      <AtFloatLayout
        className={`${styles.container} ${extendsContainerWapper} ${hideWapperBgc ? styles.hideContainerBgc : ''}`}
        isOpened={isOpened}
        onClose={onClose}
      >
        <View
          style={{
            paddingBottom: hidePaddingBottom ? '' : `${safeBottom}px`,
          }}
        >
          {Components && <Components onClose={onClose} {...otherProps} />}
          {children}
        </View>
      </AtFloatLayout>
    </View>
  );
};

export default PickerWapper;
